<template>
    <div class="refer-feedback">
        <div v-if="useful === -1">
            <div>
                <a>{{ activeName }}</a>
                <span class="m-l-8">对你是否有帮助？</span>
            </div>
            <flexbox justify="space-around" style="width: 100%; margin-top: 16px">
                <dl @click.stop="handleUseful(1)">
                    <dd><my-icon :type="useful === 1 ? 'iconyoubangzhu_sel' : 'iconyoubangzhu_nor'" style="font-size: 24px" /></dd>
                    <dt>有帮助</dt>
                </dl>
                <dl @click.stop="handleUseful(0)">
                    <dd><my-icon :type="useful === 0 ? 'iconmeibangzhu_sel' : 'iconmeibangzhu_nor'" style="font-size: 24px" /></dd>
                    <dt>无帮助</dt>
                </dl>
            </flexbox>
        </div>
        <div v-else>
            <div>
                <div style="text-align: center"><CheckCircleFilled class="success-color margin-r-8" />评价成功</div>
                <span class="m-l-8">感谢您的评价，让我们一起加油！</span>
            </div>
            <flexbox justify="space-around" style="width: 100%; margin-top: 16px">
                <dl>
                    <dd><my-icon :type="useful === 1 ? 'iconyoubangzhu_sel' : 'iconyoubangzhu_nor'" style="font-size: 24px" /></dd>
                    <dt>{{ useful === 1 ? '有帮助' : '无帮助' }}</dt>
                </dl>
            </flexbox>
        </div>
        <div class="close-cont">
            <flexbox>
                <span class="disable-font-color" v-if="useful !== -1">{{ timeCount }}s</span>
                <CloseOutlined @click="hideFeedback" style="color: #d9d9d9" />
            </flexbox>
        </div>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { CloseOutlined, CheckCircleFilled } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue/es';
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
    components: {
        CloseOutlined,
        CheckCircleFilled
    },
    props: {
        selectValue: { type: Object, default: () => ({}) }
    },
    emits: ['hide'],
    setup(props, { emit }) {
        const useful = ref(-1);
        const timeCount = ref(3);
        const timer = ref<any>(null);
        const activeName = computed(() => {
            const { type, file, name } = props.selectValue;
            return `《${type === '文档' ? file : name}》`;
        });
        // 更新有用数
        const handleUseful = async (type) => {
            useful.value = type;
            if (type === 1) {
                const query = {
                    id: props.selectValue.id
                };
                const { success, errorMsg } = await api.referenceTemplateModel.updateTemplateUse(query);
                if (success) {
                    timer.value = setInterval(() => {
                        timeCount.value--;
                        if (timeCount.value === 0) {
                            hideFeedback();
                        }
                    }, 1000);
                } else {
                    message.error(errorMsg);
                }
            } else {
                timer.value = setInterval(() => {
                    timeCount.value--;
                    if (timeCount.value === 0) {
                        hideFeedback();
                    }
                }, 1000);
            }
        };
        // 关闭
        const hideFeedback = () => {
            useful.value = -1;
            timer.value = null;
            emit('hide');
        };
        return {
            useful,
            timeCount,
            activeName,
            handleUseful,
            hideFeedback
        };
    }
});
</script>

<style scoped lang="less">
.refer-feedback {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 16px 24px;
    background: #ffffff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px 0 0 4px;
    dl {
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
    }
    .close-cont {
        position: absolute;
        right: 8px;
        top: 8px;
    }
}
</style>